<template>
  <div>
    <tag color="blue" style="margin-bottom: 1rem;" v-if="employeeName!=null && employeeName!=''">该用户的站内信负责人是:{{employeeName}}</tag><br>
    <Dropdown trigger="click" @on-visible-change="showHide">
      <div style="min-width: 200px">
        <Button @on-change="inputChange" long v-if="!isSelectedEmployee">
          {{choosedEmployee}}
          <Icon type="ios-arrow-down"></Icon>
        </Button>
        <Button @click="clearSelectedEmployee" long  v-if="isSelectedEmployee">
          {{choosedEmployee}}
          <Icon type="md-close"></Icon>
        </Button>
      </div>
      <DropdownMenu slot="list">
        <div style="padding: 0.7rem">
          <div style="display: flex;flex-direction: column; max-height: 500px;">
            <ul v-show="datas.length > 0">
              <li v-for="item in filterDatas" v-show="filterModel"><a @click="choseValue(item)">{{item.userName}}</a></li>
              <li v-for="item in datas" v-show="!filterModel"><a @click="choseValue(item)">{{item.userName}}</a></li>
            </ul>
<!--            <div style="width:100%" v-show="isWebResult">
              <Page  :total="page.total" :page-size="page.pageSize" :current="page.pageNum"
                     @on-change="changePageNum" @on-page-size-change="changePageSize" :page-size-opts="page.options" />
            </div>-->
          </div>
          <div v-show="datas.length == 0" style="padding: 2em;text-align: center">
            查询中…
          </div>
          <div v-show="filterModel && filterDatas.length == 0" style="padding: 2em;text-align: center">
            没有匹配结果
          </div>
          <div v-show="isWebResult && datas.length == 0" style="padding: 2em;text-align: center">
            查询结果为空
          </div>
        </div>
      </DropdownMenu>

    </Dropdown>
<!--    <div style="width: 100%;">
      <Row class="y_query_right" style="margin-bottom: 10px;">
        <Input type="text" v-model="paramSearch.name" placeholder="坐席名/姓名" clearable class="y_condition"></Input>
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
      </Row>
      <Table :columns="columns" :data="list" border></Table>


      <div style="margin-top: 20px; text-align: right;">
        <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum"
              @on-change="changePageNum" @on-page-size-change="changePageSize" :page-size-opts="page.options"
              show-sizer show-elevator/>
      </div>
    </div>-->
  </div>
</template>

<script>
import customerServiceData from "./customerService/customerServiceData";
export default {
  name: "SearchCustomerService",
  props: {
    // employeeId: {type: String, required: true, default: ""},
    // searchName: {type: String, default: ""},
    choosed: {
      id:"",
      name:""
    },
    employeeName:'',
    clear:false //是否清除已选择选项
  },
  data() {
    return {
      // list: customerServiceData.tData.list,
      // paramSearch: customerServiceData.tParams.paramSearch,
      // page: customerServiceData.tPage,
      datas: [],
      filterDatas:[],
      choosedEmployee:"请选择座席",
      filterModel :false,
      isWebResult:false,
      isSelectedEmployee:false,
      page:{
        total: 0,
        pageNum: 1,
        pageSize: 1000,
        options: [40, 60, 80, 120],
      }
    }
  },
  computed: {
    columns() {
      let self = this;
      return [
        {title: " ", width: 80, align: "center", render(h, params) {
          return h("div", [
            h("input", {
              attrs: {
                name: "showroom",
                type: "radio",
                value: params.row.employeeId,
              },
              on: {
                change: () => {
                  self.chooseCustomerService(params.row);
                }
              }
            })
          ]);
          }},
        {title: "坐席名", key: "name", width: 150, align: "center"},
        {title: "姓名", key: "userName", width: 150, align: "center"},
        {title: "邮箱", key: "email", minWidth: 250, align: "center"},
      ]
    }
  },
  methods: {
    search() {
      this.page.pageNum = 1;
      this.queryList();
    },
    /*changePageNum(pageNum) {
      this.page.pageNum = pageNum;
      this.queryList();
    },
    changePageSize(pageSize) {
      this.page.pageNum = 1;
      this.page.pageSize = pageSize;
      this.queryList();
    },
    queryList() {
      let params = {pageNum: this.page.pageNum, pageSize: this.pageSize};
      params.name = this.paramSearch.name;
      this.$Spin.show();
      this.$apiChat.queryCustomerServiceList(params).then(response => {
        this.$Spin.hide();
        this.list.splice(0);
        if(response.success) {
          let page = response.result;
          this.list.push(...page.list);
          this.page.total = page.total;
        }else{
          this.page.total = 0;
          console.error(response);
          this.$Message.error(response.errorMessage);
        }
      }).catch(() => {
        this.$Spin.hide();
        this.list.splice(0);
        this.$Message.error("查询Live Chat座席列表失败！")
      });
    },*/
    chooseCustomerService(item) {
      this.$emit("choose-customer-service", item);
    },
    inputChange(){
      this.filterModel = true;
    },
    showHide(isShow){
      if (isShow){
        if (this.datas.length == 0){
          this.webList()
        }
      }
    },
    clearSelectedEmployee(){ //清除已选座席
      this.choosedEmployee = "请选择座席";
      this.isSelectedEmployee = false;
      this.$emit('choose-customer-service', null);
    },
    choseValue(value) {
      this.filterModel = false;
      this.choosedEmployee = value.userName;
      this.isSelectedEmployee = true;
      this.$emit('choose-customer-service', value)
    },
    changePageNum(pageNum) {
      this.page.pageNum = pageNum;
      this.datas.length = 0;
      this.isWebResult = false;
      this.webList()
    },
    changePageSize(pageSize) {
      this.page.pageNum = 1;
      this.datas.length = 0;
      this.page.pageSize = pageSize;
      this.isWebResult = false;
      this.webList()
    },
    webList() {
      let params = {pageNum: this.page.pageNum, pageSize: this.page.pageSize};
      this.$apiChat.queryCustomerServiceList(params).then(response => {
        this.isWebResult = true;
        if(response.success) {
          this.datas.splice(0);
          let page = response.result;
          this.datas.push(...page.list);
          this.page.total = page.total;
        }else{
          this.page.total = 0;
          console.error(response);
          this.$Message.error(response.errorMessage);
        }
      }).catch(() => {
        this.$Spin.hide();
        this.$Message.error("查询Live Chat座席列表失败！")
      });
    },
  },
  watch: {
    choosed(value){
      if (value.id !== ""){
        this.choosedEmployee = value.name;
        this.isSelectedEmployee = true;
      }else{
        this.choosedEmployee = "请选择座席";
        this.isSelectedEmployee = false;
      }
    },
    choosedEmployee(value){
      if(this.filterModel){
        if (value !== '') {
          setTimeout(() => {
            this.filterDatas = this.datas.filter(item => item.userName.indexOf(value) > -1);
          }, 200);
        } else {
          this.filterModel = false;
        }
      }
    },
    clear(value){
      if(value){
        this.clearSelectedEmployee();
      }
    }
  }
}
</script>

<style scoped lang="less">
@import  (once,optional)  "../css/base";
.tiy_search{
  min-width: 25rem;
}
ul {
  list-style: none;
  width: 30em;
}
li {
  width: 7em;
  text-align: left;
  padding: 0.5em;
  display: inline;
  line-height: 20px;
  float:left;
}

a {color:black;}
a:link {color:black;}
a:visited {color:black;}
a:hover {color:red;}
a:active {color:black;}
</style>
